import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import IconDefault from '@/assets/customer/icon-default.png'
import type { CompanyInfoDto, CompanyProductInfoDto, PayWageInfoDto } from '@/api/company/types'
import { Button, Col, Image, Row, Tag, Tooltip } from 'ant-design-vue'
import { CaretDownOutlined, RightOutlined } from '@ant-design/icons-vue'
import { ClaimPeriodStatusCnEnum, CompanyAuditStatusCnEnum } from '@/const/enum'
import { CompanyAuditStatusColorMap } from '@/const/colorMap'
import type { LongInsuranceCaseListDto, ReportCaseResultDto } from '@/api/insurance/period/types'

interface BasicInfoDto {
    [key: string]: BasicInfoItemDto
}
interface BasicInfoItemDto {
    label: string
    value: string | number | null | undefined
    prefix?: string
    suffix?: string
    event?: () => void
}

@Component
export class BasicInfoView extends Render {
    @Prop() claimData!: LongInsuranceCaseListDto<ReportCaseResultDto>

    showManageProduct = false
    showAccount = false
    showEdit = false
    showDetail = false

    @Emit('refresh')
    handleRefresh() {}

    @Emit('close')
    handleClose() {}

    renderItem(name: string, content: string | null | undefined) {
        return (
            <div>
                <div class="text-sm text-black-300 mb-10px">{name}</div>
                <div>{content ?? '--'}</div>
            </div>
        )
    }

    render() {
        return (
            <>
                <div class="">
                    <div class="flex items-center w-full">
                        <Image width={60} height={60} src={IconDefault}></Image>
                        <div class="ml-16px flex-1">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="text-18px font-bold mr-16px">
                                        {this.claimData.companyName}
                                    </div>
                                    <Tag
                                        color={
                                            CompanyAuditStatusColorMap[
                                                this.claimData
                                                    .reportStatus as keyof typeof CompanyAuditStatusColorMap
                                            ]
                                        }
                                    >
                                        {ClaimPeriodStatusCnEnum[this.claimData.reportStatus]}
                                    </Tag>
                                </div>
                                <div class="flex items-center">
                                    <Tooltip
                                        placement="bottom"
                                        v-slots={{
                                            default: () => {
                                                return (
                                                    <div class="flex px-5px py-1px rounded-sm border border-solid border-border-color-100 items-center text-black-300 cursor-pointer">
                                                        <span class="mr-5px">更多设置</span>
                                                        <CaretDownOutlined />
                                                    </div>
                                                )
                                            },
                                            title: () => {
                                                return (
                                                    <div class="leading-loose p-5px text-center">
                                                        <div class="cursor-pointer">设置</div>
                                                        <div class="cursor-pointer">查看材料</div>
                                                        <div class="cursor-pointer">事故视频</div>
                                                    </div>
                                                )
                                            }
                                        }}
                                    ></Tooltip>
                                    <Button
                                        class="ml-12px"
                                        type="primary"
                                        size="small"
                                        onClick={() => this.handleClose}
                                    >
                                        返回
                                    </Button>
                                </div>
                            </div>
                            <div class="text-base text-black-300 mt-8px"> Id: {this.claimData.id}</div>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

export default toNative<
    { claimData: LongInsuranceCaseListDto<ReportCaseResultDto> },
    {
        refresh: () => void
        close: () => void
            }
            >(BasicInfoView)
